<template>
  <div>
    <el-form-item label="规格名" class="guige-item-key">
      <el-select size="mini"
        v-model="guige_key1"
        placeholder="请选择"
        @input="inputGuigeKey"
        filterable>
        <el-option
        @click.native="changeGuigeKey(index)"
        v-for="(item, index) in guigeItem"
        :key="index" :label="item.guigeitemkey" :value="item.guigeitemkey"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="规格值">
      <el-select size="mini"
        v-model="guige_value1"
        placeholder="请选择"
        filterable>
        <el-row v-for="(item, index) in new Array(guigeValueCount)" :key="index">
          <el-option
          v-for="(item, index) in guigeItem[kIndex].children" 
          :key="index" :label="item.guigeitemvalue" :value="item.guigeitemvalue"></el-option>
        </el-row>
      </el-select>
      <el-button type="text" @click="addGuigeValue">添加规格</el-button>
    </el-form-item>
  </div>
</template>

<script>
  export default {
    methods: {
      // 输入规格键名
      inputGuigeKey() {
        console.log('value')
        console.log('输入规格键名了')
      },
      // 改变规格键名
      changeGuigeKey(index) {
        this.kIndex = index
      },
      // 添加规格值
      addGuigeValue() {
        console.log('hhh')
        this.guigeValueCount = this.guigeValueCount + 1
        console.log(this.guigeValueCount)
      }
    },
    props: {
      guigeItem: {
        type: Array,
        require: true
      }
    },
    data() {
      return {
        kIndex: 0,
        guigeValueCount: 1,
        guige_key1: '',
        guige_value1: ''
      }
    }
  }
</script>

<style scoped>
.guige-item-key {
  margin-bottom: 10px;
  margin-right: 10px;
  background-color: #F8F8F8;
}
</style>